<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="用户昵称" name="nickName">
          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber">
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
        </uni-forms-item>
		<u-form-item label="生活美照" label-width="150">
			<u-upload 
			:custom-btn="true" :fileList="imageList" ref="uUpload" :header="header" :auto-upload="true" :action="action" :max-size="10 * 1024 * 1024" max-count="9" width="160" height="160" :size-type="siteType">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
				</view>
			</u-upload>
		</u-form-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
		<uni-forms-item label="年龄" name="userAge" >
		  <uni-easyinput v-model="user.userAge" />
		</uni-forms-item>
		<uni-forms-item label="身高cm" name="userHeight" >
		 <u-input   :select-open="selectHeightShow" v-model="user.userHeight" placeholder="请选择身高" @click="selectHeightShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="体重Kg" name="userWeight" >
		  <uni-number-box v-model="user.userWeight" :step="0.5" />
		</uni-forms-item>
		<uni-forms-item label="体型" name="userShapeText" >
		 <u-input  :select-open="selectShapeShow" v-model="user.userShapeText" placeholder="请选择体型" @click="selectShapeShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="民族" name="userNation">
		  <uni-easyinput v-model="user.userNation" placeholder="请输入民族" />
		</uni-forms-item>
		<uni-forms-item label="毕业院校" name="userGradu">
		  <uni-easyinput v-model="user.userGradu" placeholder="请输入毕业院校" />
		</uni-forms-item>
		<uni-forms-item label="月收入" name="userIncomeText" >
		 <u-input  :select-open="selectShow" v-model="user.userIncomeText" placeholder="请选择收入" @click="selectShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="居住地" name="userLocation">
		  <uni-easyinput v-model="user.userLocation" placeholder="请输入居住地" />
		</uni-forms-item>
		<uni-forms-item label="家乡" name="userHome">
		  <uni-easyinput v-model="user.userHome" placeholder="请输入家乡" />
		</uni-forms-item>
		<uni-forms-item label="房产" name="userHouse">
		  <uni-easyinput v-model="user.userHouse" placeholder="请输入房产(是否有贷款等)" />
		</uni-forms-item>
		<uni-forms-item label="车产" name="userCar">
		  <uni-easyinput v-model="user.userCar" placeholder="请输入车产" />
		</uni-forms-item>
		<uni-forms-item label="职业" name="vocation" >
		 <u-input  :select-open="selectVocationShow" v-model="user.vocationText" placeholder="请选择职业" @click="selectVocationShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="学历" name="userEdu" >
		 <u-input  :select-open="selectUserEduShow" v-model="user.userEduText" placeholder="请选择学历" @click="selectUserEduShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="婚姻状况" name="userMarr" >
		 <u-input  :select-open="selectUserMarrShow" v-model="user.userMarrText" placeholder="请选择婚姻状况" @click="selectUserMarrShow = true"></u-input>
		</uni-forms-item>
		<uni-forms-item label="希望何时结婚" name="marrExpect" >
		 <uni-easyinput v-model="user.marrExpect" placeholder="请输入希望何时结婚" />
		</uni-forms-item>
		<uni-forms-item label="个人说明" name="userExplain" >
		 <uni-easyinput type="textarea" v-model="user.userExplain" placeholder="请输入个人说明"></uni-easyinput>
		</uni-forms-item>
		<uni-forms-item label="择偶要求" name="userRequire" >
		 <uni-easyinput type="textarea" v-model="user.userRequire" placeholder="请输入择偶要求"></uni-easyinput>
		</uni-forms-item>
      </uni-forms>
	  <u-select mode="single-column" :list="heightList" v-model="selectHeightShow" @confirm="selectHeightConfirm"></u-select>
	  <u-select mode="single-column" :list="incomeList" v-model="selectShow" @confirm="selectConfirm"></u-select>
	  <u-select mode="single-column" :list="vocationList" v-model="selectVocationShow" @confirm="selectVocationConfirm"></u-select>
	  <u-select mode="single-column" :list="userEduList" v-model="selectUserEduShow" @confirm="selectUserEduConfirm"></u-select>
	  <u-select mode="single-column" :list="userMarrList" v-model="selectUserMarrShow" @confirm="selectUserMarrConfirm"></u-select>
	  <u-select mode="single-column" :list="shapeList" v-model="selectShapeShow" @confirm="selectShapeConfirm"></u-select>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"
  import { listFile } from "@/api/system/file"
  import {getDicts} from "@/api/system/data.js"
  import config from "@/config.js" // 全局配置文件
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
		selectShow:false,
		selectHeightShow:false,
		selectVocationShow:false,
		selectUserEduShow:false,
		selectUserMarrShow:false,
		selectShapeShow:false,
		heightList: [{label:"150"},{label:"151"},{label:"152"},{label: "153"},{label: "154"},{label: "155"},{label: "156"},{label: "157"},{label: "158"},{label: "159"},{label: "160"},{label: "161"},{label: "162"},{label: "163"},{label: "164"},{label: "165"},{label: "166"},{label: "167"},{label: "168"},{label: "169"},{label: "170"}
						,{label: "171"},{label: "172"},{label: "173"},{label: "174"},{label: "175"},{label: "176"},{label: "177"},{label: "178"},{label: "179"},{label: "180"},{label: "181"},{label: "182"},{label: "183"},{label: "184"},{label: "185"},{label: "186"},{label: "187"},{label: "188"},{label: "189"},{label: "190"}
						,{label: "191"},{label: "192"},{label: "193"},{label: "194"},{label: "195"},{label: "196"},{label: "197"},{label: "198"},{label: "199"},{label: "200"}],
		incomeList: [],
		vocationList:[],
		userEduList:[],
		userMarrList:[],
		imageList:[],
		shapeList:[],
		action: config.baseUrl + '/common/upload',
		siteType:['compressed'],
		header: {
			"Authorization": 'Bearer ' + getToken()
		},
        user: {
		  userId:"",
          nickName: "",
          phonenumber: "",
          email: "",
          sex: "",
		  userAge:"",
		  userWeight:"",
		  userHeight:"",
		  userIncome:"",
		  userIncomeText:"",
		  userNation:"",
		  userGradu:"",
		  userLocation:"",
		  userHome:"",
		  vocation:"",
		  vocationText:"",
		  userEdu:"",
		  userEduText:"",
		  userHouse:"",
		  userCar:"",
		  userMarr:"",
		  userMarrText:"",
		  marrExpect:"",
		  userExplain:"",
		  userRequire:"",
		  userFile:"",
		  userShape:"",
		  userShapeText:""
        },
        sexs: [{
          text: '男',
          value: "0"
        }, {
          text: '女',
          value: "1"
        }],
        rules: {
          nickName: {
            rules: [{
              required: true,
              errorMessage: '用户昵称不能为空'
            }]
          },
          phonenumber: {
            rules: [{
              required: true,
              errorMessage: '手机号码不能为空'
            }, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
          },
          email: {
            rules: [{
              required: true,
              errorMessage: '邮箱地址不能为空'
            }, {
              format: 'email',
              errorMessage: '请输入正确的邮箱地址'
            }]
          }
        }
      }
    },
    onLoad() {
      this.getUser();
    },
    onReady() {
		getDicts("in_come").then(res=>{
				 let rows = res.data;
				 if(rows.length > 0){
				 	for (let i=0; i<rows.length; i++) {
						if(this.user.userIncome===rows[i].dictValue){
							this.user.userIncomeText = rows[i].dictLabel
						}
				 		this.incomeList.push({
				 			label: rows[i].dictLabel,
				 			value: rows[i].dictValue
				 		})
				 	}
				 }
		});
		getDicts("occupation").then(res=>{
				 let rows = res.data;
				 if(rows.length > 0){
				 	for (let i=0; i<rows.length; i++) {
						if(this.user.vocation===rows[i].dictValue){
							this.user.vocationText = rows[i].dictLabel
						}
				 		this.vocationList.push({
				 			label: rows[i].dictLabel,
				 			value: rows[i].dictValue
				 		})
				 	}
				 }
		});
		getDicts("education").then(res=>{
				 let rows = res.data;
				 if(rows.length > 0){
				 	for (let i=0; i<rows.length; i++) {
						if(this.user.userEdu===rows[i].dictValue){
							this.user.userEduText = rows[i].dictLabel
						}
				 		this.userEduList.push({
				 			label: rows[i].dictLabel,
				 			value: rows[i].dictValue
				 		})
				 	}
				 }
		});
		getDicts("hunyin").then(res=>{
				 let rows = res.data;
				 if(rows.length > 0){
				 	for (let i=0; i<rows.length; i++) {
						if(this.user.userMarr===rows[i].dictValue){
							this.user.userMarrText = rows[i].dictLabel
						}
				 		this.userMarrList.push({
				 			label: rows[i].dictLabel,
				 			value: rows[i].dictValue
				 		})
				 	}
				 }
		});
		getDicts("tixing").then(res=>{
				 let rows = res.data;
				 if(rows.length > 0){
				 	for (let i=0; i<rows.length; i++) {
						if(this.user.userShape===rows[i].dictValue){
							this.user.userShapeText = rows[i].dictLabel
						}
				 		this.shapeList.push({
				 			label: rows[i].dictLabel,
				 			value: rows[i].dictValue
				 		})
				 	}
				 }
		});
      this.$refs.form.setRules(this.rules)
    },
    methods: {
		selectHeightConfirm(e){
			e.map((val, index) => {
				this.user.userHeight = val.label;
			})
		},
		selectConfirm(e) {
			e.map((val, index) => {
				this.user.userIncome = val.value;
				this.user.userIncomeText = val.label
			})
		},
		selectVocationConfirm(e) {
			e.map((val, index) => {
				this.user.vocation = val.value;
				this.user.vocationText = val.label
			})
		},
		selectUserEduConfirm(e) {
			e.map((val, index) => {
				this.user.userEdu = val.value;
				this.user.userEduText = val.label
			})
		},
		
		selectUserMarrConfirm(e) {
			e.map((val, index) => {
				this.user.userMarr = val.value;
				this.user.userMarrText = val.label
			})
		},
		selectShapeConfirm(e) {
			e.map((val, index) => {
				this.user.userShape = val.value;
				this.user.userShapeText = val.label
			})
		},
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
		  this.getFiles();
        })
		
      },
	  getFiles(){
		let queryParams = {
			userId: this.user.userId,
			pageNum: 1,
			pageSize: 10,
			orderByColumn: "createTime",
			isAsc: "desc",
		}
		listFile(queryParams).then(response => {
			if (response.code === 200) {
				let rows = response.rows;
				if(rows.length > 0){
					let files = rows[0].mediaUrl;
					if(files){
						let urlList = files.split(",");
						for (var i=0;i<urlList.length;i++){
							let course = {};
							if(urlList[i].length>0){
								course.url =config.baseUrl+urlList[i];
								course.fileName=urlList[i];
								this.imageList.push(course);
							}
						};
					}
					
				}
				uni.hideLoading();
			}
		});
	  },
      submit(ref) {
		let files = [];
		files = this.$refs.uUpload.lists.filter(val => {
			return val.progress == 100;
		})
		if(!this.$u.test.isEmpty(files)){
			this.user.userFile = "";
			let ids =[];
			files.map(val => {
				if(val.response){
					ids.push(val.response.fileName)
				}else if(val.url){
					ids.push(val.url.replace(config.baseUrl,''));
				}
			})
			this.user.userFile=ids.join(',');
		}
        this.$refs.form.validate().then(res => {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功")
			uni.navigateBack();
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
</style>
